


import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';

import Paper from 'material-ui/Paper';
import AppBar from 'material-ui/AppBar';
import RaisedButton from 'material-ui/RaisedButton';
import IconButton from 'material-ui/IconButton';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';

import styles from './index.css';

const Redux = (props, context) => {

  const { router } = context;

  return (
    <Paper>
      <AppBar
        title="Redux"
        iconElementLeft={<IconButton onTouchTap={()=>{router.goBack()}}><NavigationArrowBack /></IconButton>}
      />
      <h2>Redux</h2>
      <p>测试内容：</p>
      <p>1、返回 redux 状态是否保持</p>
      <p>2、假设保持，那在此页面修改，返回获得修改后的 redux</p>

      <RaisedButton label="修改 redux 值为 3" primary={true} onTouchTap={()=>{props.dispatch({
        type: 'home/changeReduxState',
        payload: {
          reduxState: 3,
        }
      })}}></RaisedButton>
      <br />

      <h2>结论</h2>
      <p>1、redux 状态保持是成立的。</p>
      <p>2、持续保持页成立。</p>
      <p>3、redux 建立在 router 之外的 store，保持一致最终的 store</p>
      <p>4、redux 虽然会保持持续状态，但是浏览器不能 refresh，登录后 token 还是需要使用 cookie</p>
    </Paper>
  );

};

Redux.contextTypes = {
  router: PropTypes.object,
};

export default connect()(Redux);
